import React, { useEffect, useRef, useState } from 'react';
import { usePdf } from '@mikecousins/react-pdf';

const ReactPdfDemo1 = ({ fileName = `http://localhost:3000/webpack5笔记.pdf` }) => {
  const [page, setPage] = useState(1);
  const canvasRef = useRef(null);

  const { pdfDocument, pdfPage } = usePdf({
    file: fileName,
    page,
    canvasRef,
  });

  useEffect(() => {
    console.log('页面加载', page);
    return () => {};
  }, [page]);

  return (
    <>
      {!pdfDocument && <span>Loading...</span>}
      <canvas ref={canvasRef} />
      {Boolean(pdfDocument && pdfDocument.numPages) && (
        <nav>
          <ul className="pager">
            <li className="previous">
              <button disabled={page === 1} onClick={() => setPage(page - 1)}>
                Previous
              </button>
            </li>
            <li className="next">
              <button disabled={page === 23} onClick={() => setPage(page + 1)}>
                Next
              </button>
            </li>
          </ul>
        </nav>
      )}
    </>
  );
};

export default ReactPdfDemo1;
